import 'package:fate_blind_box/theme/theme_color.dart';
import 'package:fate_blind_box/widget/appbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';

import 'logic.dart';

class SmsVerifyPage extends GetView<SmsVerifyLogic> {
  const SmsVerifyPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const HzAppBar(
        text: '验证手机号',
      ),
      backgroundColor: Colors.white,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
            margin: EdgeInsets.only(left: 14.w, right: 14.w, top: 14.w),
            height: 45,
            color: const Color(0xFFF6F8FA),
            child: TextField(
              controller: controller.state.mobController,
              maxLength: 11,
              keyboardType: TextInputType.phone,
              cursorColor: const Color(0xFFFB6D99),
              style: const TextStyle(fontSize: 12, color: Color(0xFF222222)),
              decoration: InputDecoration(
                hintText: "请输入您的手机号",
                counterText: "",
                border: InputBorder.none,
                hintStyle: const TextStyle(color: Color(0xFF999999)),
                fillColor: const Color(0xffF1F3FB),
                filled: true,
                enabledBorder: const OutlineInputBorder(
                  /*边角*/
                  borderRadius: BorderRadius.all(
                    Radius.circular(5), //边角为30
                  ),
                  borderSide: BorderSide(
                    color: Colors.white54, //边线颜色为黄色
                    width: 1, //边线宽度为2
                  ),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(5),
                  borderSide: const BorderSide(
                    color: Colors.white54, //边框颜色为绿色
                    width: 1, //宽度为5
                  ),
                ),
                contentPadding:
                    const EdgeInsets.only(top: 0, bottom: 0, left: 10),
              ),
              onChanged: (e) {},
            ),
          ),
          //验证码
          Container(
              height: 45,
              margin: EdgeInsets.only(left: 14.w, right: 14.w, top: 14.w),
              decoration: ShapeDecoration(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(5)),
                  color: const Color(0xffF1F3FB)),
              alignment: Alignment.centerLeft,
              child: Row(
                children: [
                  Expanded(
                    child: TextField(
                      controller: controller.state.codeController,
                      keyboardType: TextInputType.phone,
                      maxLength: 11,
                      maxLines: 1,
                      style:
                          TextStyle(fontSize: 12, color: ThemeColor.textColor),
                      decoration: const InputDecoration(
                        hintText: "请输入验证码",
                        border: InputBorder.none,
                        hintStyle: TextStyle(color: Color(0xFF999999)),
                        counterText: '',
                        fillColor: Color(0xffF1F3FB),
                        filled: true,
                      ),
                    ),
                  ),
                  Container(
                      padding: EdgeInsets.symmetric(horizontal: 12.w),
                      margin:
                          EdgeInsets.only(right: 6.w, top: 10.w, bottom: 10.w),
                      decoration: BoxDecoration(
                        // border: Border.all(color: const Color(0xFF2C7FF8)),
                        borderRadius: BorderRadius.circular(15),
                        color: ThemeColor.colorCF8F23,
                      ),
                      alignment: Alignment.center,
                      child: GestureDetector(
                        onTap: controller.sendVerifyCode,
                        child: Obx(() {
                          return Text(
                            controller.state.curTime.value > 0
                                ? "${controller.state.curTime.value}秒后重新获取"
                                : "获取验证码",
                            style: const TextStyle(
                                color: Colors.white, fontSize: 12),
                          );
                        }),
                      ))
                ],
              )),
          const Spacer(),
          InkWell(
            onTap: controller.submitAction,
            child: Container(
              margin: EdgeInsets.only(bottom: 44.w, left: 14.w, right: 14.w),
              height: 48.w,
              width: double.infinity,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(22),
                  color: ThemeColor.appColor),
              child: const Text(
                '提交',
                style: TextStyle(color: Colors.white, fontSize: 16),
              ),
            ),
          )
        ],
      ),
    );
  }
}
